<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello WOrld</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>hello-world</h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        <p>v-bind绑定</p>
        <p><img v-bind:src="imgpath" width="200px;"></p>
        <p>style v-bind:href</p>
        <a v-bind:href="tobaidu" target="_blank">去百度看看</a>
        <p>简写 :href</p>
        <a :href="tobaidu" target="_blank">去百度看看</a>
        <p>绑定css样式</p>
        <span>
            <div :class="cA">绑定样式</div>
            <div :class="cB">绑定样式2</div>
            <div :class="{cB:isOk}">绑定样式3</div>
            <div :class="isOk?cA:cB">条件绑定样式2- 三元表达式</div>

            <input type="checkbox" v-model="isOk" id="ok">
            <label for="ok">状态{{isOk}}</label>
            
            <hr/>
            <p>绑定style</p>
            <p>
                <div :style="{color:red,fontSize:font}">5, 绑定style</div>
            </p>
<p>对象的形式绑定style:<span style="color:red">[注意，style中的font-size 在vue种要修改为fontSize]</span></p>
        <p>
            <div :style="stlObj">6, 对象绑定style</div>
        </p>
        </span>
    </div>
    <style>
        .cA {
            color: red;
            font-size: 150%;
        }
        
        .cB {
            color: blue;
            font-size: 14px;
        }
    </style>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                imgpath: "../assets/imgs/20170227001137.jpg",
                tobaidu: "http://www.baidu.com",
                cA: "cA",
                cB: "cB",
                isOk: true,
                red: "red",
                font: "font",
                stlObj: {
                    fontSize: "25px",
                    color: "green"
                }
            }
        })
    </script>
</body>

</html>